<template>
    <div class="theme">
        <i class="iconfont icon-huitutiaosepan" @click="show = true"></i>
        <div class="overlay" v-show="show" @click="show = false">
            <van-action-sheet v-model="show" title="主题颜色">
                <div class="mainContent">
                    <ul class="overlayList">
                        <li class="overlayItem" @click="setThemeColor" v-for="(color,index) in themeColor" :key="index">
                            <!-- 用户选中的颜色的块用这个显示 -->
                            <van-badge :color="localColor" v-if="localColor == color.rgb">
                                <div class="child rgbContainter" :style="{ backgroundColor:`${color.rgb}` }"/>
                                <template #content>
                                    <van-icon name="success" class="badge-icon" />
                                </template>
                            </van-badge>
                            <!-- 用户没选中的颜色的块用这个显示 -->
                            <div v-if="localColor != color.rgb" class="rgbContainter" :style="{ backgroundColor:`${color.rgb}` }"></div>

                            <p class="name">{{color.name}}</p>
                        </li>
                    </ul>
                </div>
            </van-action-sheet>
            
        </div>
    </div>
</template>

<script>
export default {
    name:'Theme',
    data() {
        return {
            themeColor:[
                {name:'静谧蓝',rgb:'rgb(18, 150, 219)'},
                {name:'枫叶红',rgb:'rgb(186, 91, 73)'},
                {name:'元气黄',rgb:'rgb(236, 212, 82)'},
                {name:'落日橙',rgb:'rgb(241, 143, 96)'},
                {name:'素雅灰',rgb:'rgb(169, 169, 169)'},
                {name:'盎然绿',rgb:'rgb(146, 144, 93)'},
                {name:'热情粉',rgb:'rgb(221, 107, 123)'},
                {name:'神秘紫',rgb:'rgb(166, 126, 183)'},
            ],
            show:false,
            localColor:'rgb(18, 150, 219)' || localStorage.getItem('localColor')

        }
    },
    methods: {
        setThemeColor(event){
            let root = document.querySelector(':root')
            let changeColor = event.target.style.backgroundColor
            root.style.setProperty('--themeColor',`${changeColor}`)
            localStorage.setItem('localColor',changeColor)
            this.localColor = changeColor
            // location.reload()//重新加载当前组件
            // 获取:root的变量值
            // console.log(getComputedStyle(document.documentElement).getPropertyValue('--themeColor'))
        },
    },
    
}
</script>

<style lang="less" scoped>
    .theme{ 
        display: flex;
        align-items: center;
        i{
            margin-left: 0.15rem;
        }
    }
    .overlay{
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 99;
            .mainContent{
                color: black;
                .overlayList{
                    list-style: none;
                    text-align: center;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    padding: 0 0.9rem;
                    align-content: flex-start;
                    .overlayItem{
                        text-align: center;
                        display: inline-block;
                        margin: 0.2rem 0.3rem;
                        .rgbContainter{
                            display: inline-block;
                            width: 0.9rem;
                            height: 0.9rem;
                            border-radius: 10%;
                            border: solid 1px #bdbdbd;
                            padding: 0.1rem;
                        }
                        .name{
                            font-size: 0.3rem;
                        }
                    }
                }
            }
    }

</style>